<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.4.6 (461470)"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2020-08-23 17:33:28 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2020-10-21 16:18:55 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>day04：vue - 脚手架 - 项目创建</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000; margin-top: 14px;">一、脚手架介绍</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;"><a href="https://cli.vuejs.org/zh/guide/" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">文档介绍</a>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">快速，自动，创建模板项目</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">自动安装环境，配置环境</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">安装
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在拥有npm工具的前提下</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">npm install -g @vue/cli</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">查看版本
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">vue --version</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">升级
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">npm update -g @vue/cli</code></li>
</ul>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">二、项目创建</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">创建项目
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">vue create myapp</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">根据提示做各项选择
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">步骤一：选择安装方式 - 自定义安装</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">Default ([Vue 2] babel, eslint)</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">Default (Vue 3 Preview) ([Vue 3] babel, eslint)</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">Manually select features</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">步骤二：选择要安装的模块</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">◉ Choose Vue version --- 选择视图版本</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">◉ Babel --- 解析js</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">◯ TypeScript --- 解析ts</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">◉ Progressive Web App (PWA) Support --- 渐进式支持</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">◉ Router --- 路由</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">◉ Vuex --- 状态管理</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">◉ CSS Pre-processors --- 样式处理</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">◉ Linter / Formatter --- 代码格式化</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">◉ Unit Testing --- 测试插件</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">◉ E2E Testing --- 测试插件</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">步骤三：选择路由模式（任选后期可调）</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">history --- http://localhost:81/        后端支持</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">hash --- http://localhost:81/#/      不需要后端支持</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">步骤四：选择什么方式处理css（node环境的scss）</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">sass/scss - node</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">步骤五：代码校验规则 - 标准规则：Standard</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">ESLint with error prevention only</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">ESLint + Airbnb config</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">ESLint + Standard config</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">ESLint + Prettier</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">步骤六：什么时候校验：保存时</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">◉ Lint on save</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">◯ Lint and fix on commit</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">步骤七：选择测试模块：任选</p>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">步骤八：端对端测试方案：默认</p>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">步骤九：项目的配置文件</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">package.json</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">步骤十：是否保存当前配置：不保存</p>
</li>
</ul>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">三、项目目录介绍</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">根目录</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">+ node_modules --- 项目的依赖包
+ public --- 基本的页面结构及静态资源
+ src --- 工作区，开发环境
+ tests --- 测试
    .browserslistrc --- 浏览器配置
    .editorconfig --- 编辑器配置
    .eslintrc --- 代码格式化配置
    .gitignore --- git忽略的文件配置
    babel.config.js --- babel的配置
    cypress.json --- 测试相关插件
    package.json --- 项目依赖的描述
    README.md --- 说明文件
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">src目录</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">+ assets --- 静态资源
+ components --- 组件
+ router --- 路由
+ store --- 状态管理器
+ views --- 页面
    App.vue --- 主页面结构
    main.js --- 程序的入口
</code></pre>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">四、单文件组件</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><a href="https://cn.vuejs.org/v2/guide/single-file-components.html" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">文档</a></p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">以vue结尾的文件</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">结构 + 行为 + 样式</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">template + script + style</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">css作用域</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">样式只在当前组件中使用</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">style</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">scoped</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"
/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">style</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">指定css语言</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">可以通过scss语言编写css</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">style</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">lang</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"scss"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"
/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">style</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">单文件组件中，定义组件无需template选项</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">template</span>&gt;</span>

<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">default</span> {}
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>

<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">style</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">scoped</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"
/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">style</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">入口文件解析(main.js)</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 引入vue文件</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> Vue <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'vue'</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 引入app组件</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> App <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./App.vue'</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 引入注册服务模块</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./registerServiceWorker'</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 引入路由模块</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> router <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./router'</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 引入状态管理器模块</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> store <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./store'</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// vue配置，生产提示</span>
Vue.config.productionTip = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>

<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
  router,
  store,
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">render</span>: <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">h</span> =&gt;</span> h(App)
}).$mount(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'#app'</span>)
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 渲染app组件，并写入id为app的标签内</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">路由的映射和渲染</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">路由的映射</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 1. 定义 (路由) 组件</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> Home <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'../views/Home.vue'</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 2. 定义路由</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> routes = [
  {
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">path</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'/home'</span>,
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">name</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'Home'</span>,
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">component</span>: Home
  },
  {
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">path</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'/about'</span>,
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">name</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'About'</span>,
    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 路由的懒加载，用时再加载，用时再映射</span>
    component: <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">()</span> =&gt;</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span>(<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/* webpackChunkName: "base" */</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'../views/About.vue'</span>)
  }
]

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 3. 创建 router 实例，然后传 `routes` 配置</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> router = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> VueRouter({
  routes
})
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">路由的渲染</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>Hello App!<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>
    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 使用 router-link 组件来导航. --&gt;</span>
    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 通过传入 `to` 属性指定链接. --&gt;</span>
    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- &lt;router-link&gt; 默认会被渲染成一个 `&lt;a&gt;` 标签。可以通过 `tag` 属性指定渲染标签 --&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">to</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"/home"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">tag</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"span"</span>&gt;</span>Go to home<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">to</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"/about"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">tag</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"span"</span>&gt;</span>Go to about<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span>&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 路由出口 --&gt;</span>
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 路由匹配到的组件将渲染在这里 --&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-view</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-view</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">设计页面结构</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">参考<a href="https://m.jd.com/" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">京东移动商城</a>布局效果</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">移动端的基准尺寸设置:
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">假设设计稿以iPhone6为基准：
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">物理像素：750*1334</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">dpr倍数：2</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">独立像素(css):375*667</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">1px对应(100/375)vw，即100px对应(100/375*100)vw</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">html{font-size:26.666666666666668vw}</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">此时：1rem = 100px</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">假设设计稿以iPhoneX为基准：
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">物理像素：1080*1920</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">dpr倍数：3</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">独立像素(css)：414*736</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">1px对应(100/414)vw，即100px对应(100/414*100)vw</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">html{font-size:24.154589371980677vw}</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">此时：1rem = 100px</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">设计页面底部</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">首页（home），分类（kind），购物车（cart），我的（my）</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">创建底部选项对应页面<br/>
<img src="day04%EF%BC%9Avue%20-%20%E8%84%9A%E6%89%8B%E6%9E%B6%20-%20%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BA.resources/6CB769FD-377E-4FF4-B540-4ADC6E6478C5.png" height="1018" width="1586"/></p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">底部的跳转</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">ul</span>&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">to</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"/index"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">tag</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"li"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">class</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"iconfont icon-ziyuan"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h5</span>&gt;</span>首页<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h5</span>&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span>&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">to</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"/kind"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">tag</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"li"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">class</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"iconfont icon-fenlei"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h5</span>&gt;</span>分类<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h5</span>&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span>&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">to</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"/find"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">tag</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"li"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">class</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"iconfont icon-faxian"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h5</span>&gt;</span>发现<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h5</span>&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span>&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">to</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"/cart"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">tag</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"li"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">class</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"iconfont icon-gouwuche"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h5</span>&gt;</span>购物车<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h5</span>&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span>&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">to</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"/my"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">tag</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"li"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">class</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"iconfont icon-wode"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h5</span>&gt;</span>我<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h5</span>&gt;</span>
  <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">router-link</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">ul</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">当前项的设置</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">当 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">&lt;router-link&gt;</code> 对应的路由匹配成功，将自动设置 class 属性值 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">.router-link-active</code>。
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">可以通过在页面审查元素得知</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">只需要在css中添加对应样式即可</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">路由重定向和别名</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">重定向
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">如果路由 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">/</code> 的重定向是 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">/home</code> 。当用户访问 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">/</code> 时，URL 将会被替换成 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">/home</code>，然后匹配路由为 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">/home</code>。</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> routes = [{
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">path</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'/'</span>,
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">redirect</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'/home'</span>
}, {
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">path</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'/home'</span>,
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">component</span>: Home
}]
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">别名
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">如果路由 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">/</code> 的别名是 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">/home</code>，意味着，当用户访问 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">/home</code> 时，URL 会保持为 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">/home</code>，但路由匹配则为 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">/</code> ，就像用户访问 <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">/</code> 一样。</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> routes = [{
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">path</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'/'</span>,
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">alias</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'/home'</span>
}]
</code></pre>
</li>
</ul>
</li>
</ol>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%23%20%E4%B8%80%E3%80%81%E8%84%9A%E6%89%8B%E6%9E%B6%E4%BB%8B%E7%BB%8D%0A1.%20%5B%E6%96%87%E6%A1%A3%E4%BB%8B%E7%BB%8D%5D(https%3A%2F%2Fcli.vuejs.org%2Fzh%2Fguide%2F)%0A%20%20%20%20-%20%E5%BF%AB%E9%80%9F%EF%BC%8C%E8%87%AA%E5%8A%A8%EF%BC%8C%E5%88%9B%E5%BB%BA%E6%A8%A1%E6%9D%BF%E9%A1%B9%E7%9B%AE%0A%20%20%20%20-%20%E8%87%AA%E5%8A%A8%E5%AE%89%E8%A3%85%E7%8E%AF%E5%A2%83%EF%BC%8C%E9%85%8D%E7%BD%AE%E7%8E%AF%E5%A2%83%0A2.%20%E5%AE%89%E8%A3%85%0A%20%20%20%20-%20%E5%9C%A8%E6%8B%A5%E6%9C%89npm%E5%B7%A5%E5%85%B7%E7%9A%84%E5%89%8D%E6%8F%90%E4%B8%8B%0A%20%20%20%20-%20%60npm%20install%20-g%20%40vue%2Fcli%60%0A3.%20%E6%9F%A5%E7%9C%8B%E7%89%88%E6%9C%AC%0A%20%20%20%20-%20%60vue%20--version%60%0A4.%20%E5%8D%87%E7%BA%A7%0A%20%20%20%20-%20%60npm%20update%20-g%20%40vue%2Fcli%60%0A%0A%23%20%E4%BA%8C%E3%80%81%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BA%0A1.%20%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE%0A%20%20%20%20-%20%60vue%20create%20myapp%60%0A2.%20%E6%A0%B9%E6%8D%AE%E6%8F%90%E7%A4%BA%E5%81%9A%E5%90%84%E9%A1%B9%E9%80%89%E6%8B%A9%0A%20%20%20%20-%20%E6%AD%A5%E9%AA%A4%E4%B8%80%EF%BC%9A%E9%80%89%E6%8B%A9%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F%20-%20%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AE%89%E8%A3%85%0A%20%20%20%20%20%20%20%20-%20Default%20(%5BVue%202%5D%20babel%2C%20eslint)%20%0A%20%20%20%20%20%20%20%20-%20Default%20(Vue%203%20Preview)%20(%5BVue%203%5D%20babel%2C%20eslint)%20%0A%20%20%20%20%20%20%20%20-%20Manually%20select%20features%20%0A%0A%20%20%20%20-%20%E6%AD%A5%E9%AA%A4%E4%BA%8C%EF%BC%9A%E9%80%89%E6%8B%A9%E8%A6%81%E5%AE%89%E8%A3%85%E7%9A%84%E6%A8%A1%E5%9D%97%0A%20%20%20%20%20%20%20%20-%20%E2%97%89%20Choose%20Vue%20version%20---%20%E9%80%89%E6%8B%A9%E8%A7%86%E5%9B%BE%E7%89%88%E6%9C%AC%0A%20%20%20%20%20%20%20%20-%20%E2%97%89%20Babel%20---%20%E8%A7%A3%E6%9E%90js%0A%20%20%20%20%20%20%20%20-%20%E2%97%AF%20TypeScript%20---%20%E8%A7%A3%E6%9E%90ts%0A%20%20%20%20%20%20%20%20-%20%E2%97%89%20Progressive%20Web%20App%20(PWA)%20Support%20---%20%E6%B8%90%E8%BF%9B%E5%BC%8F%E6%94%AF%E6%8C%81%0A%20%20%20%20%20%20%20%20-%20%E2%97%89%20Router%20---%20%E8%B7%AF%E7%94%B1%0A%20%20%20%20%20%20%20%20-%20%E2%97%89%20Vuex%20---%20%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%0A%20%20%20%20%20%20%20%20-%20%E2%97%89%20CSS%20Pre-processors%20---%20%E6%A0%B7%E5%BC%8F%E5%A4%84%E7%90%86%0A%20%20%20%20%20%20%20%20-%20%E2%97%89%20Linter%20%2F%20Formatter%20---%20%E4%BB%A3%E7%A0%81%E6%A0%BC%E5%BC%8F%E5%8C%96%0A%20%20%20%20%20%20%20%20-%20%E2%97%89%20Unit%20Testing%20---%20%E6%B5%8B%E8%AF%95%E6%8F%92%E4%BB%B6%0A%20%20%20%20%20%20%20%20-%20%E2%97%89%20E2E%20Testing%20---%20%E6%B5%8B%E8%AF%95%E6%8F%92%E4%BB%B6%0A%20%20%20%20-%20%E6%AD%A5%E9%AA%A4%E4%B8%89%EF%BC%9A%E9%80%89%E6%8B%A9%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%BC%8F%EF%BC%88%E4%BB%BB%E9%80%89%E5%90%8E%E6%9C%9F%E5%8F%AF%E8%B0%83%EF%BC%89%0A%20%20%20%20%20%20%20%20-%20history%20---%20http%3A%2F%2Flocalhost%3A81%2F%20%20%20%20%20%20%20%20%E5%90%8E%E7%AB%AF%E6%94%AF%E6%8C%81%0A%20%20%20%20%20%20%20%20-%20hash%20---%20http%3A%2F%2Flocalhost%3A81%2F%23%2F%20%20%20%20%20%20%E4%B8%8D%E9%9C%80%E8%A6%81%E5%90%8E%E7%AB%AF%E6%94%AF%E6%8C%81%0A%20%20%20%20-%20%E6%AD%A5%E9%AA%A4%E5%9B%9B%EF%BC%9A%E9%80%89%E6%8B%A9%E4%BB%80%E4%B9%88%E6%96%B9%E5%BC%8F%E5%A4%84%E7%90%86css%EF%BC%88node%E7%8E%AF%E5%A2%83%E7%9A%84scss%EF%BC%89%0A%20%20%20%20%20%20%20%20-%20sass%2Fscss%20-%20node%0A%20%20%20%20-%20%E6%AD%A5%E9%AA%A4%E4%BA%94%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99%20-%20%E6%A0%87%E5%87%86%E8%A7%84%E5%88%99%EF%BC%9AStandard%0A%20%20%20%20%20%20%20%20-%20ESLint%20with%20error%20prevention%20only%20%0A%20%20%20%20%20%20%20%20-%20ESLint%20%2B%20Airbnb%20config%20%0A%20%20%20%20%20%20%20%20-%20ESLint%20%2B%20Standard%20config%20%0A%20%20%20%20%20%20%20%20-%20ESLint%20%2B%20Prettier%20%0A%20%20%20%20-%20%E6%AD%A5%E9%AA%A4%E5%85%AD%EF%BC%9A%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E6%A0%A1%E9%AA%8C%EF%BC%9A%E4%BF%9D%E5%AD%98%E6%97%B6%0A%20%20%20%20%20%20%20%20-%20%E2%97%89%20Lint%20on%20save%0A%20%20%20%20%20%20%20%20-%20%E2%97%AF%20Lint%20and%20fix%20on%20commit%0A%20%20%20%20-%20%E6%AD%A5%E9%AA%A4%E4%B8%83%EF%BC%9A%E9%80%89%E6%8B%A9%E6%B5%8B%E8%AF%95%E6%A8%A1%E5%9D%97%EF%BC%9A%E4%BB%BB%E9%80%89%0A%0A%20%20%20%20-%20%E6%AD%A5%E9%AA%A4%E5%85%AB%EF%BC%9A%E7%AB%AF%E5%AF%B9%E7%AB%AF%E6%B5%8B%E8%AF%95%E6%96%B9%E6%A1%88%EF%BC%9A%E9%BB%98%E8%AE%A4%0A%0A%20%20%20%20-%20%E6%AD%A5%E9%AA%A4%E4%B9%9D%EF%BC%9A%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%0A%20%20%20%20%20%20%20%20-%20package.json%0A%20%20%20%20-%20%E6%AD%A5%E9%AA%A4%E5%8D%81%EF%BC%9A%E6%98%AF%E5%90%A6%E4%BF%9D%E5%AD%98%E5%BD%93%E5%89%8D%E9%85%8D%E7%BD%AE%EF%BC%9A%E4%B8%8D%E4%BF%9D%E5%AD%98%0A%20%20%20%20%0A%0A%0A%23%20%E4%B8%89%E3%80%81%E9%A1%B9%E7%9B%AE%E7%9B%AE%E5%BD%95%E4%BB%8B%E7%BB%8D%0A1.%20%E6%A0%B9%E7%9B%AE%E5%BD%95%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%2B%20node_modules%20---%20%E9%A1%B9%E7%9B%AE%E7%9A%84%E4%BE%9D%E8%B5%96%E5%8C%85%0A%20%20%20%20%2B%20public%20---%20%E5%9F%BA%E6%9C%AC%E7%9A%84%E9%A1%B5%E9%9D%A2%E7%BB%93%E6%9E%84%E5%8F%8A%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%0A%20%20%20%20%2B%20src%20---%20%E5%B7%A5%E4%BD%9C%E5%8C%BA%EF%BC%8C%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%0A%20%20%20%20%2B%20tests%20---%20%E6%B5%8B%E8%AF%95%0A%20%20%20%20%20%20%20%20.browserslistrc%20---%20%E6%B5%8F%E8%A7%88%E5%99%A8%E9%85%8D%E7%BD%AE%0A%20%20%20%20%20%20%20%20.editorconfig%20---%20%E7%BC%96%E8%BE%91%E5%99%A8%E9%85%8D%E7%BD%AE%0A%20%20%20%20%20%20%20%20.eslintrc%20---%20%E4%BB%A3%E7%A0%81%E6%A0%BC%E5%BC%8F%E5%8C%96%E9%85%8D%E7%BD%AE%0A%20%20%20%20%20%20%20%20.gitignore%20---%20git%E5%BF%BD%E7%95%A5%E7%9A%84%E6%96%87%E4%BB%B6%E9%85%8D%E7%BD%AE%0A%20%20%20%20%20%20%20%20babel.config.js%20---%20babel%E7%9A%84%E9%85%8D%E7%BD%AE%0A%20%20%20%20%20%20%20%20cypress.json%20---%20%E6%B5%8B%E8%AF%95%E7%9B%B8%E5%85%B3%E6%8F%92%E4%BB%B6%0A%20%20%20%20%20%20%20%20package.json%20---%20%E9%A1%B9%E7%9B%AE%E4%BE%9D%E8%B5%96%E7%9A%84%E6%8F%8F%E8%BF%B0%0A%20%20%20%20%20%20%20%20README.md%20---%20%E8%AF%B4%E6%98%8E%E6%96%87%E4%BB%B6%0A%20%20%20%20%60%60%60%0A%0A2.%20src%E7%9B%AE%E5%BD%95%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%2B%20assets%20---%20%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%0A%20%20%20%20%2B%20components%20---%20%E7%BB%84%E4%BB%B6%0A%20%20%20%20%2B%20router%20---%20%E8%B7%AF%E7%94%B1%0A%20%20%20%20%2B%20store%20---%20%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E5%99%A8%0A%20%20%20%20%2B%20views%20---%20%E9%A1%B5%E9%9D%A2%0A%20%20%20%20%20%20%20%20App.vue%20---%20%E4%B8%BB%E9%A1%B5%E9%9D%A2%E7%BB%93%E6%9E%84%0A%20%20%20%20%20%20%20%20main.js%20---%20%E7%A8%8B%E5%BA%8F%E7%9A%84%E5%85%A5%E5%8F%A3%0A%20%20%20%20%60%60%60%0A%20%20%20%20%0A%20%20%20%20%0A%23%20%E5%9B%9B%E3%80%81%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%0A1.%20%5B%E6%96%87%E6%A1%A3%5D(https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Fsingle-file-components.html)%0A2.%20%E4%BB%A5vue%E7%BB%93%E5%B0%BE%E7%9A%84%E6%96%87%E4%BB%B6%0A%20%20%20%20-%20%E7%BB%93%E6%9E%84%20%2B%20%E8%A1%8C%E4%B8%BA%20%2B%20%E6%A0%B7%E5%BC%8F%0A%20%20%20%20-%20template%20%2B%20script%20%2B%20style%0A3.%20css%E4%BD%9C%E7%94%A8%E5%9F%9F%0A%20%20%20%20-%20%E6%A0%B7%E5%BC%8F%E5%8F%AA%E5%9C%A8%E5%BD%93%E5%89%8D%E7%BB%84%E4%BB%B6%E4%B8%AD%E4%BD%BF%E7%94%A8%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Cstyle%20scoped%3E%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%60%60%60%0A4.%20%E6%8C%87%E5%AE%9Acss%E8%AF%AD%E8%A8%80%0A%20%20%20%20-%20%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87scss%E8%AF%AD%E8%A8%80%E7%BC%96%E5%86%99css%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Cstyle%20lang%3D%22scss%22%3E%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%60%60%60%0A%20%20%20%20%0A5.%20%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E4%B8%AD%EF%BC%8C%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E6%97%A0%E9%9C%80template%E9%80%89%E9%A1%B9%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Ctemplate%3E%0A%20%20%20%20%3C%2Ftemplate%3E%0A%0A%20%20%20%20%3Cscript%3E%0A%20%20%20%20export%20default%20%7B%7D%0A%20%20%20%20%3C%2Fscript%3E%0A%0A%20%20%20%20%3Cstyle%20scoped%3E%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%60%60%60%0A%0A6.%20%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6%E8%A7%A3%E6%9E%90(main.js)%0A%20%20%20%20%60%60%60js%0A%20%20%20%20%2F%2F%20%E5%BC%95%E5%85%A5vue%E6%96%87%E4%BB%B6%0A%20%20%20%20import%20Vue%20from%20'vue'%0A%20%20%20%20%2F%2F%20%E5%BC%95%E5%85%A5app%E7%BB%84%E4%BB%B6%0A%20%20%20%20import%20App%20from%20'.%2FApp.vue'%0A%20%20%20%20%2F%2F%20%E5%BC%95%E5%85%A5%E6%B3%A8%E5%86%8C%E6%9C%8D%E5%8A%A1%E6%A8%A1%E5%9D%97%0A%20%20%20%20import%20'.%2FregisterServiceWorker'%0A%20%20%20%20%2F%2F%20%E5%BC%95%E5%85%A5%E8%B7%AF%E7%94%B1%E6%A8%A1%E5%9D%97%0A%20%20%20%20import%20router%20from%20'.%2Frouter'%0A%20%20%20%20%2F%2F%20%E5%BC%95%E5%85%A5%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E5%99%A8%E6%A8%A1%E5%9D%97%0A%20%20%20%20import%20store%20from%20'.%2Fstore'%0A%0A%20%20%20%20%2F%2F%20vue%E9%85%8D%E7%BD%AE%EF%BC%8C%E7%94%9F%E4%BA%A7%E6%8F%90%E7%A4%BA%0A%20%20%20%20Vue.config.productionTip%20%3D%20true%0A%0A%20%20%20%20new%20Vue(%7B%0A%20%20%20%20%20%20router%2C%0A%20%20%20%20%20%20store%2C%0A%20%20%20%20%20%20render%3A%20h%20%3D%3E%20h(App)%0A%20%20%20%20%7D).%24mount('%23app')%0A%20%20%20%20%2F%2F%20%E6%B8%B2%E6%9F%93app%E7%BB%84%E4%BB%B6%EF%BC%8C%E5%B9%B6%E5%86%99%E5%85%A5id%E4%B8%BAapp%E7%9A%84%E6%A0%87%E7%AD%BE%E5%86%85%0A%20%20%20%20%60%60%60%0A%0A7.%20%E8%B7%AF%E7%94%B1%E7%9A%84%E6%98%A0%E5%B0%84%E5%92%8C%E6%B8%B2%E6%9F%93%0A%20%20%20%20-%20%E8%B7%AF%E7%94%B1%E7%9A%84%E6%98%A0%E5%B0%84%0A%20%20%20%20%60%60%60js%0A%20%20%20%20%2F%2F%200.%20%E5%A6%82%E6%9E%9C%E4%BD%BF%E7%94%A8%E6%A8%A1%E5%9D%97%E5%8C%96%E6%9C%BA%E5%88%B6%E7%BC%96%E7%A8%8B%EF%BC%8C%E5%AF%BC%E5%85%A5Vue%E5%92%8CVueRouter%EF%BC%8C%E8%A6%81%E8%B0%83%E7%94%A8%20Vue.use(VueRouter)%0A%0A%20%20%20%20%2F%2F%201.%20%E5%AE%9A%E4%B9%89%20(%E8%B7%AF%E7%94%B1)%20%E7%BB%84%E4%BB%B6%0A%20%20%20%20import%20Home%20from%20'..%2Fviews%2FHome.vue'%0A%0A%20%20%20%20%2F%2F%202.%20%E5%AE%9A%E4%B9%89%E8%B7%AF%E7%94%B1%0A%20%20%20%20const%20routes%20%3D%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20path%3A%20'%2Fhome'%2C%0A%20%20%20%20%20%20%20%20name%3A%20'Home'%2C%0A%20%20%20%20%20%20%20%20component%3A%20Home%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20path%3A%20'%2Fabout'%2C%0A%20%20%20%20%20%20%20%20name%3A%20'About'%2C%0A%20%20%20%20%20%20%20%20%2F%2F%20%E8%B7%AF%E7%94%B1%E7%9A%84%E6%87%92%E5%8A%A0%E8%BD%BD%EF%BC%8C%E7%94%A8%E6%97%B6%E5%86%8D%E5%8A%A0%E8%BD%BD%EF%BC%8C%E7%94%A8%E6%97%B6%E5%86%8D%E6%98%A0%E5%B0%84%0A%20%20%20%20%20%20%20%20component%3A%20()%20%3D%3E%20import(%2F*%20webpackChunkName%3A%20%22base%22%20*%2F%20'..%2Fviews%2FAbout.vue')%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%0A%0A%20%20%20%20%2F%2F%203.%20%E5%88%9B%E5%BB%BA%20router%20%E5%AE%9E%E4%BE%8B%EF%BC%8C%E7%84%B6%E5%90%8E%E4%BC%A0%20%60routes%60%20%E9%85%8D%E7%BD%AE%0A%20%20%20%20const%20router%20%3D%20new%20VueRouter(%7B%0A%20%20%20%20%20%20routes%0A%20%20%20%20%7D)%0A%20%20%20%20%60%60%60%0A%20%20%20%20%0A%20%20%20%20-%20%E8%B7%AF%E7%94%B1%E7%9A%84%E6%B8%B2%E6%9F%93%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%3Ch1%3EHello%20App!%3C%2Fh1%3E%0A%20%20%20%20%20%20%3Cp%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E4%BD%BF%E7%94%A8%20router-link%20%E7%BB%84%E4%BB%B6%E6%9D%A5%E5%AF%BC%E8%88%AA.%20--%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E9%80%9A%E8%BF%87%E4%BC%A0%E5%85%A5%20%60to%60%20%E5%B1%9E%E6%80%A7%E6%8C%87%E5%AE%9A%E9%93%BE%E6%8E%A5.%20--%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%3Crouter-link%3E%20%E9%BB%98%E8%AE%A4%E4%BC%9A%E8%A2%AB%E6%B8%B2%E6%9F%93%E6%88%90%E4%B8%80%E4%B8%AA%20%60%3Ca%3E%60%20%E6%A0%87%E7%AD%BE%E3%80%82%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%20%60tag%60%20%E5%B1%9E%E6%80%A7%E6%8C%87%E5%AE%9A%E6%B8%B2%E6%9F%93%E6%A0%87%E7%AD%BE%20--%3E%0A%20%20%20%20%20%20%20%20%3Crouter-link%20to%3D%22%2Fhome%22%20tag%3D%22span%22%3EGo%20to%20home%3C%2Frouter-link%3E%0A%20%20%20%20%20%20%20%20%3Crouter-link%20to%3D%22%2Fabout%22%20tag%3D%22span%22%3EGo%20to%20about%3C%2Frouter-link%3E%0A%20%20%20%20%20%20%3C%2Fp%3E%0A%20%20%20%20%20%20%3C!--%20%E8%B7%AF%E7%94%B1%E5%87%BA%E5%8F%A3%20--%3E%0A%20%20%20%20%20%20%3C!--%20%E8%B7%AF%E7%94%B1%E5%8C%B9%E9%85%8D%E5%88%B0%E7%9A%84%E7%BB%84%E4%BB%B6%E5%B0%86%E6%B8%B2%E6%9F%93%E5%9C%A8%E8%BF%99%E9%87%8C%20--%3E%0A%20%20%20%20%20%20%3Crouter-view%3E%3C%2Frouter-view%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%60%60%60%0A%0A8.%20%E8%AE%BE%E8%AE%A1%E9%A1%B5%E9%9D%A2%E7%BB%93%E6%9E%84%0A%20%20%20%20-%20%E5%8F%82%E8%80%83%5B%E4%BA%AC%E4%B8%9C%E7%A7%BB%E5%8A%A8%E5%95%86%E5%9F%8E%5D(https%3A%2F%2Fm.jd.com%2F)%E5%B8%83%E5%B1%80%E6%95%88%E6%9E%9C%0A%20%20%20%20-%20%E7%A7%BB%E5%8A%A8%E7%AB%AF%E7%9A%84%E5%9F%BA%E5%87%86%E5%B0%BA%E5%AF%B8%E8%AE%BE%E7%BD%AE%3A%0A%20%20%20%20%20%20%20%20-%20%E5%81%87%E8%AE%BE%E8%AE%BE%E8%AE%A1%E7%A8%BF%E4%BB%A5iPhone6%E4%B8%BA%E5%9F%BA%E5%87%86%EF%BC%9A%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20%E7%89%A9%E7%90%86%E5%83%8F%E7%B4%A0%EF%BC%9A750*1334%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20dpr%E5%80%8D%E6%95%B0%EF%BC%9A2%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20%E7%8B%AC%E7%AB%8B%E5%83%8F%E7%B4%A0(css)%3A375*667%0A%20%20%20%20%20%20%20%20%20%20%20%20-%201px%E5%AF%B9%E5%BA%94(100%2F375)vw%EF%BC%8C%E5%8D%B3100px%E5%AF%B9%E5%BA%94(100%2F375*100)vw%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20html%7Bfont-size%3A26.666666666666668vw%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20%E6%AD%A4%E6%97%B6%EF%BC%9A1rem%20%3D%20100px%0A%20%20%20%20%20%20%20%20-%20%E5%81%87%E8%AE%BE%E8%AE%BE%E8%AE%A1%E7%A8%BF%E4%BB%A5iPhoneX%E4%B8%BA%E5%9F%BA%E5%87%86%EF%BC%9A%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20%E7%89%A9%E7%90%86%E5%83%8F%E7%B4%A0%EF%BC%9A1080*1920%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20dpr%E5%80%8D%E6%95%B0%EF%BC%9A3%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20%E7%8B%AC%E7%AB%8B%E5%83%8F%E7%B4%A0(css)%EF%BC%9A414*736%0A%20%20%20%20%20%20%20%20%20%20%20%20-%201px%E5%AF%B9%E5%BA%94(100%2F414)vw%EF%BC%8C%E5%8D%B3100px%E5%AF%B9%E5%BA%94(100%2F414*100)vw%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20html%7Bfont-size%3A24.154589371980677vw%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20%E6%AD%A4%E6%97%B6%EF%BC%9A1rem%20%3D%20100px%0A%0A9.%20%E8%AE%BE%E8%AE%A1%E9%A1%B5%E9%9D%A2%E5%BA%95%E9%83%A8%0A%20%20%20%20-%20%E9%A6%96%E9%A1%B5%EF%BC%88home%EF%BC%89%EF%BC%8C%E5%88%86%E7%B1%BB%EF%BC%88kind%EF%BC%89%EF%BC%8C%E8%B4%AD%E7%89%A9%E8%BD%A6%EF%BC%88cart%EF%BC%89%EF%BC%8C%E6%88%91%E7%9A%84%EF%BC%88my%EF%BC%89%0A%0A10.%20%E5%88%9B%E5%BB%BA%E5%BA%95%E9%83%A8%E9%80%89%E9%A1%B9%E5%AF%B9%E5%BA%94%E9%A1%B5%E9%9D%A2%0A!%5B180eebe2bbe79cec265493e626432310.png%5D(evernotecid%3A%2F%2FBB210BE9-3A02-4842-A4C9-7970C5C1E576%2Fappyinxiangcom%2F16639017%2FENResource%2Fp726)%0A%0A%0A11.%20%E5%BA%95%E9%83%A8%E7%9A%84%E8%B7%B3%E8%BD%AC%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%3Crouter-link%20to%3D%22%2Findex%22%20tag%3D%22li%22%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22iconfont%20icon-ziyuan%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3Ch5%3E%E9%A6%96%E9%A1%B5%3C%2Fh5%3E%0A%20%20%20%20%20%20%3C%2Frouter-link%3E%0A%20%20%20%20%20%20%3Crouter-link%20to%3D%22%2Fkind%22%20tag%3D%22li%22%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22iconfont%20icon-fenlei%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3Ch5%3E%E5%88%86%E7%B1%BB%3C%2Fh5%3E%0A%20%20%20%20%20%20%3C%2Frouter-link%3E%0A%20%20%20%20%20%20%3Crouter-link%20to%3D%22%2Ffind%22%20tag%3D%22li%22%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22iconfont%20icon-faxian%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3Ch5%3E%E5%8F%91%E7%8E%B0%3C%2Fh5%3E%0A%20%20%20%20%20%20%3C%2Frouter-link%3E%0A%20%20%20%20%20%20%3Crouter-link%20to%3D%22%2Fcart%22%20tag%3D%22li%22%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22iconfont%20icon-gouwuche%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3Ch5%3E%E8%B4%AD%E7%89%A9%E8%BD%A6%3C%2Fh5%3E%0A%20%20%20%20%20%20%3C%2Frouter-link%3E%0A%20%20%20%20%20%20%3Crouter-link%20to%3D%22%2Fmy%22%20tag%3D%22li%22%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22iconfont%20icon-wode%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3Ch5%3E%E6%88%91%3C%2Fh5%3E%0A%20%20%20%20%20%20%3C%2Frouter-link%3E%0A%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%60%60%60%0A%0A12.%20%E5%BD%93%E5%89%8D%E9%A1%B9%E7%9A%84%E8%AE%BE%E7%BD%AE%0A%20%20%20%20-%20%E5%BD%93%20%60%3Crouter-link%3E%60%20%E5%AF%B9%E5%BA%94%E7%9A%84%E8%B7%AF%E7%94%B1%E5%8C%B9%E9%85%8D%E6%88%90%E5%8A%9F%EF%BC%8C%E5%B0%86%E8%87%AA%E5%8A%A8%E8%AE%BE%E7%BD%AE%20class%20%E5%B1%9E%E6%80%A7%E5%80%BC%20%60.router-link-active%60%E3%80%82%0A%20%20%20%20%20%20%20%20-%20%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%E5%9C%A8%E9%A1%B5%E9%9D%A2%E5%AE%A1%E6%9F%A5%E5%85%83%E7%B4%A0%E5%BE%97%E7%9F%A5%0A%20%20%20%20-%20%E5%8F%AA%E9%9C%80%E8%A6%81%E5%9C%A8css%E4%B8%AD%E6%B7%BB%E5%8A%A0%E5%AF%B9%E5%BA%94%E6%A0%B7%E5%BC%8F%E5%8D%B3%E5%8F%AF%0A%0A%0A13.%20%E8%B7%AF%E7%94%B1%E9%87%8D%E5%AE%9A%E5%90%91%E5%92%8C%E5%88%AB%E5%90%8D%0A%20%20%20%20-%20%E9%87%8D%E5%AE%9A%E5%90%91%0A%20%20%20%20%20%20%20%20-%20%E5%A6%82%E6%9E%9C%E8%B7%AF%E7%94%B1%20%60%2F%60%20%E7%9A%84%E9%87%8D%E5%AE%9A%E5%90%91%E6%98%AF%20%60%2Fhome%60%20%E3%80%82%E5%BD%93%E7%94%A8%E6%88%B7%E8%AE%BF%E9%97%AE%20%60%2F%60%20%E6%97%B6%EF%BC%8CURL%20%E5%B0%86%E4%BC%9A%E8%A2%AB%E6%9B%BF%E6%8D%A2%E6%88%90%20%60%2Fhome%60%EF%BC%8C%E7%84%B6%E5%90%8E%E5%8C%B9%E9%85%8D%E8%B7%AF%E7%94%B1%E4%B8%BA%20%60%2Fhome%60%E3%80%82%0A%20%20%20%20%20%20%20%20%60%60%60js%0A%20%20%20%20%20%20%20%20const%20routes%20%3D%20%5B%7B%0A%20%20%20%20%20%20%20%20%20%20path%3A%20'%2F'%2C%0A%20%20%20%20%20%20%20%20%20%20redirect%3A%20'%2Fhome'%0A%20%20%20%20%20%20%20%20%7D%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20path%3A%20'%2Fhome'%2C%0A%20%20%20%20%20%20%20%20%20%20component%3A%20Home%0A%20%20%20%20%20%20%20%20%7D%5D%0A%20%20%20%20%20%20%20%20%60%60%60%0A%20%20%20%20-%20%E5%88%AB%E5%90%8D%0A%20%20%20%20%20%20%20%20-%20%E5%A6%82%E6%9E%9C%E8%B7%AF%E7%94%B1%20%60%2F%60%20%E7%9A%84%E5%88%AB%E5%90%8D%E6%98%AF%20%60%2Fhome%60%EF%BC%8C%E6%84%8F%E5%91%B3%E7%9D%80%EF%BC%8C%E5%BD%93%E7%94%A8%E6%88%B7%E8%AE%BF%E9%97%AE%20%60%2Fhome%60%20%E6%97%B6%EF%BC%8CURL%20%E4%BC%9A%E4%BF%9D%E6%8C%81%E4%B8%BA%20%60%2Fhome%60%EF%BC%8C%E4%BD%86%E8%B7%AF%E7%94%B1%E5%8C%B9%E9%85%8D%E5%88%99%E4%B8%BA%20%60%2F%60%20%EF%BC%8C%E5%B0%B1%E5%83%8F%E7%94%A8%E6%88%B7%E8%AE%BF%E9%97%AE%20%60%2F%60%20%E4%B8%80%E6%A0%B7%E3%80%82%0A%20%20%20%20%20%20%20%20%60%60%60js%0A%20%20%20%20%20%20%20%20const%20routes%20%3D%20%5B%7B%0A%20%20%20%20%20%20%20%20%20%20path%3A%20'%2F'%2C%0A%20%20%20%20%20%20%20%20%20%20alias%3A%20'%2Fhome'%0A%20%20%20%20%20%20%20%20%7D%5D%0A%20%20%20%20%20%20%20%20%60%60%60%0A%0A%0A%0A%0A%0A</center></body></html>